<template>
  <div class="Issue">
    <div class="page-head">
      <div class="page-title">关联下发</div>
    </div>
    <div class="page-body">
      <div class="coll-wrapper">
        <div v-for="item in tables" :key="item.id" class="coll-table">
          <div class="coll-title" @click="toggle(item)">
            <div class="tit">
              <img src="~assets/img/right_caret.png" class="caret" :class="{'rotated': item.opened}">
              <span class="txt">
                {{item.name}}
              </span>
            </div>
            <img v-if="item.status == '1'" src="~assets/img/checked.png" class="checked-img">
            <div class="coll-btn" @click.stop="open(item)">
              关联数据模板
            </div>
          </div>
          <div class="sub_table" v-show="item.opened">
            <el-table :data="tableData" stripe border :fit="true">
              
              <el-table-column
                prop="alias"
                :show-overflow-tooltip="true"
                label="设备名称"
              >
              </el-table-column>

              <el-table-column
                prop="cnc_id"
                label="CNC ID"
              >
              </el-table-column>
              <el-table-column
                label="楼层"
                prop="floor"
              >
              </el-table-column>

              <el-table-column
                prop="branch"
                label="车间"
              >
              </el-table-column>
              <el-table-column
                prop="line"
                label="线"
              >
              </el-table-column>
              <el-table-column
                label="序号"
                prop="seq"
              >
              </el-table-column>

              <el-table-column
                prop="serial"
                label="设备识别号"
              >
              </el-table-column>
            </el-table>
          </div>
          
        </div>
      </div>
      
    </div>
    
    <div v-if="tables.length" class="page-footer">
      <pagina-tion
        class="page-pager"
        v-show="total >= 0"
        :background="true"
        :total="total"
        :offset.sync="offset"
        :limit.sync="limit"
        @pagination="getChangePage"
        @sizeChange="getSizePage"
      />
    </div>

    <el-dialog
      :visible.sync="visable"
      width="415px"
      title="关联数据模板"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <div class="dialog-body">
        <div class="mb15">
          <el-select
            v-model="cnc"
            placeholder="CNC类型筛选"
            class="tool-sel long"
            @change="checkedList"
          >
            <el-option
              v-for="item in cncSel"
              :key="item.k"
              :label="item.v"
              :value="item.k">
            </el-option>
          </el-select>
        </div>
        <div class="relative">
          <el-select
            v-model="tempId"
            name="tempId"
            v-validate="'required'"
            placeholder="请选择一个模板"
            class="tool-sel long"
          >
            <el-option
              v-for="item in list"
              :key="item.template_id"
              :label="item.name"
              :value="item.template_id"
              class="long-opt"
            >
              <span>
                {{item.name}}
              </span>
              <i class="el-icon-view" @click.stop="toDetail(item.template_id)"></i>
            </el-option>
          </el-select>
          <div v-show="errors.has('tempId')" class="el-form-item__error">{{ errors.first('tempId') }}</div>
        </div>
        
        

        <!--
        <el-transfer
          v-model="value"
          :data="list"
          :props="{
            key: 'template_id',
            label: 'name'
          }"
          filterable
          :filter-method="filterMd"
          filter-placeholder="数据模板名称搜索"
          :titles="['可选数据模板','已选数据模板']"
          :render-content="renderTransfer"
        />
        -->
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit">确认关联并下发模板</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :visible.sync="detailVisable"
      width="780px"
      title="数据详情模板"
      :close-on-click-modal="false"
      :show-close="true"
      @close="detailClose"
    >
      <el-table :data="detailData" stripe border :fit="true" :height="$dialogTableHeight">
        
        <el-table-column
          prop="name"
          :show-overflow-tooltip="true"
          label="业务模板名称"
        >
        </el-table-column>

        <el-table-column
          prop="cnc"
          width="120"
          label="CNC类型"
        >
          <template slot-scope="{ row }">
            <div>
              {{cncSel.find(s => s.k == row.cnc).v}}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          label="ID"
          prop="field"
        >
        </el-table-column>
        

        <el-table-column
          width="140"
          :show-overflow-tooltip="true"
          prop="field_type"
          label="类型"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          label="备注"
          prop="remark"
        >
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import * as api from "@/api";
import { limit } from "@/consts/consts";
import paginaTion from "@/components/libs/paginaTion";
export default {
  components:{
    paginaTion
  },
  data() {
    return {
      limit,
      total: 0,
      offset: 0,
      id: '',
      tables: [],
      tableData: [],
      visable: false,
      list: [],
      value: [],
      cncSel: [],
      cnc: '',
      tempId: '',
      
      detailVisable: false,
      detailData: []
    }
  },
  watch: {
    value(val) {
      this.list = this.list.map(item => {
        item.disabled = val.length > 0
        return item
      })
    }
  },
  methods: {
    filterMd(query, item) {
      return item.name.indexOf(query) > -1
    },
    toggle(table) {
      if (!table.opened) {
        this.groupDetail(table.id)
      }

      this.tables.forEach(item => {
        item.opened = item.id === table.id ? (!item.opened) : item.id === table.id
      })
      
    },

    open(item) {
      this.$validator.reset()
      this.id = item.id
      this.checkedList()
    },

    detailClose() {
      this.detailVisable = false
    },

    cancel() {
      this.tempId = ''
      this.visable = false
    },

    renderTransfer(h, {name, template_id}) {
      return (
        <div class="transfer-label">
          <div>{name}</div>
          <i class="el-icon-view" onClick={($event) => this.toDetail($event, template_id)}></i>
        </div>
      )
    },

    toDetail(template_id) {
      this.getList(template_id)
    },

    
    getChangePage(val) {
      this.offset = val.offset;
      this.groupList()
    },

    getSizePage(val) {
      this.offset = 0
      this.groupList();
    },

    submit() {
      this.$validator.validateAll().then((valid) => {
        if (valid) {
          this.groupIssue()
        }
      })
    },

    async groupList() {
      const { code, data, total } = await api.template(this).groupList({
        offset: this.offset,
        limit: this.limit,
      })
      if (code === 0) {
        this.total = total
        this.tables = data.map(item => {
          item.opened = false
          return item
        })
      }
    },
        
    async groupDetail(id) {
      const { code, data } = await api.template(this).groupDetail(id)
      if (code === 0) {
        this.tableData = data
      }
    },
            
    async groupIssue() {
      const { code } = await api.template(this).groupIssue({
        group_id: this.id,
        template: this.tempId
      })
      if (code === 0) {
        this.$message.success('操作成功！')
        this.cancel()
      }
    },

            
    // 下拉列表
    async downList() {
      const { code, data } = await api.dropdown(this).downList({
        type: 'cnc'
      })
      if (code === 0) {
        this.cncSel = data
        this.cnc = data[0].k
      }
    },
    
    // 5.9.3. 可选和已选数据模板
    async checkedList() {
      const { code, data } = await api.template(this).checkedList({
        group_id: this.id,
        cnc: this.cnc
      });
      if (code === 0) {
        this.list = data.map(item => {
          item.disabled = false
          return item
        })
        let values = []
        data.filter(d => {
          if (d.checked == '1') {
            values.push(d.template_id)
          } 
        })
        this.value = values
        [this.tempId] = values
        this.visable = true
      }
    },

    // 详情列表
    async getList(template_id) {
      const { code, data } = await api.template(this).templateDetail({
        template_id,
        offset: 0,
        limit: -1
      });
      if (code === 0) {
        this.detailData = data.group
        this.detailVisable = true
      }
    },
  },
  created () {
    this.groupList()
    this.downList()
  },
}
</script>

<style lang="stylus">
.Issue {
  
}
</style>